<template>
  <div class="skeleton common-container" :containerWidth="props.containerWidth">
   <!-- 动态显示 banner -->
   <div
      class="skeleton-item banner"
      :style="{
        width: props.bannerStyle.width,
        height: props.bannerStyle.height,
        backgroundColor: props.bannerStyle.background
      }"
    ></div>

    <div class="image-list" v-for="(i, idx1) in imageListCount" :key="idx1">
      <div class="skeleton-item-inner" v-for="(j, idx2) in i" :key="idx2"
        :style="{
          width: props.imageListStyle.width,
          height: props.imageListStyle.height,
          backgroundColor: props.imageListStyle.background
        }"
      ></div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

type bannerStyleType = {
  width: string;
  height: string;
  background: string;
}
type imageListStyleType = {
  width: string;
  height: string;
  background: string;
}


const props = withDefaults(defineProps<{
  bannerStyle?: bannerStyleType; // 轮播图的属性
  imageListStyle?: imageListStyleType; // 图片列表的属性
  imageListCount?: Array<any>; // 图片列表的数量
  containerWidth?: string; // 容器宽度
}>(), {
  // default props here
  bannerStyle: (): bannerStyleType => {
    return {
      width: '100%',
      height: '690px',
      background: '#f5f5f5',
    }
  },
  imageListStyle: (): imageListStyleType => {
    return {
      width: '100%',
      height: '400px',
      background: '#f5f5f5'
    }
  },
  imageListCount: () => {
    return [2,3]
  },
});



</script>
<style lang="scss" scoped>

$--marbom: 20px;
$--marright: 30px;

.skeleton {
  // min-width: 960px;
  // max-width: 1900px;
  height: 100%;
  margin: 0 auto;
}
.skeleton-item {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  margin-bottom: $--marbom;
  
}
.banner{
  height: 690px;
}
.image-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: $--marbom;
    .skeleton-item-inner{
      margin-right: $--marright;
      background-color: red;
      flex: 1;
      animation: skeleton-pulse 1.6s ease-in-out infinite;
      // height: 200px;
      &:last-child{
        margin-right: 0;
      }
    }

}
@keyframes skeleton-pulse {
  0% {
    // transform: scale(1);
    background-color: #f5f5f5;
  }
  50% {
    // transform: scale(1.01);
    background-color: #ffffff;
  }
  100% {
    // transform: scale(1);
    background-color: #f5f5f5;
  }
}
</style>
